<template>
  <view class="main bg-white">
    <view class="bg-header"></view>
    <form class="form">
      <view class="input-view">
        <view class="input-item">
          <text class="input-icon iconfont icon-pwd"></text>
          <span style="margin-right: 15px;height:26px;line-height: 23px"><span>旧</span><span>密</span><span>码</span></span>
          <input name="oldPassword" type="password" :placeholder="placeholder['1']" autocomplete="off" maxlength="20"
                 v-model="user.oldPassword"
                 :placeholder-style="colorFont['1']"
                 @input="inputInput('1',user.oldPassword)"
                 @focus="inputFocus('1',user.oldPassword)"
                 @blur="inputBlur('1',user.oldPassword)"
          />
          <text v-if="successImg.show1" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
          <text v-else :class="[showClearBtn['1']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('1')"></text>
        </view>
      </view>
      <view class="zcicon" v-if="defClass['1']">
        <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg1 }}
      </view>
      <view class="zcicon" v-if="errorClass['1']" style="color: #ff9595;">
        <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg1 }}
      </view>

      <!-- 密码输入框 -->
      <view class="input-view">
        <view class="input-item">
          <text class="input-icon iconfont icon-pwd"></text>
          <span style="margin-right: 15px;height:26px;line-height: 23px">新密码</span>
          <input name="newPassword" type="password" :placeholder="placeholder['4']" autocomplete="off"
                 :placeholder-style="colorFont['4']"
                 v-model="user.newPassword"
                 @input="inputInput('4',user.newPassword)"
                 @focus="inputFocus('4',user.newPassword)"
                 @blur="inputBlur('4',user.newPassword)"
          />
          <text v-if="successImg.show4" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
          <text v-else :class="[showClearBtn['4']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('4')"></text>
        </view>
      </view>
      <view class="zcicon" v-if="defClass['4']">
        <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg4 }}
      </view>
      <view class="zcicon" v-if="errorClass['4']" style="color: #ff9595;">
        <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg4 }}
      </view>
      <view class="zcicon" v-if="qrClass['2']">
        <text style="font-size: 30rpx;margin: 0;color: #ff9595;" class="input-icon iconfont icon-frown"></text>{{ msgValue.msg4 }}
      </view>
      <view class="zcicon" v-if="qrClass['3']">
        <text style="font-size: 30rpx;margin: 0;color: #ffbd4a;" class="input-icon iconfont icon-meh"></text>{{ msgValue.msg4 }}
      </view>
      <view class="zcicon" v-if="qrClass['4']">
        <text style="font-size: 30rpx;margin: 0;color: #1AFA29;" class="input-icon iconfont icon-smile"></text>{{ msgValue.msg4 }}
      </view>

      <!-- 再次密码输入框 -->
      <view class="input-view">
        <view class="input-item">
          <text class="input-icon iconfont icon-zaicishurumima"></text>
          <span style="margin-right: 15px;height:26px;line-height: 23px">确认密码</span>
          <input name="password2" type="password" :placeholder="placeholder['5']" autocomplete="off"
                 :placeholder-style="colorFont['5']"
                 v-model="password2"
                 @input="inputInput('5',password2)"
                 @focus="inputFocus('5',password2)"
                 @blur="inputBlur('5',password2)"
          />
          <text v-if="successImg.show5" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
          <text v-else :class="[showClearBtn['5']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('5')"></text>
        </view>
      </view>
      <view class="zcicon" v-if="defClass['5']">
        <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg5 }}
      </view>
      <view class="zcicon" v-if="errorClass['5']" style="color: #ff9595;">
        <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg5 }}
      </view>
      <view class="submit-btn-wrap">
        <button style="height: 35px;line-height: 35px;" @click="submit" class="submit-btn bg-primary color-white">确 定</button>
      </view>
    </form>
    <view class="loder" v-if="loading" >
      <div class="loader-part">正在建立信息...</div>
    </view>
    <view class="bg-footer flex-row">
      <navigator
        class="back-nav"
        @click="navigateBack"
        open-type="navigateBack"
      >
        <text class="iconfont icon-back"></text>
      </navigator>
    </view>
    <i-message id="message"/>
    <van-notify id="van-notify" />
  </view>
</template>

<script>
import {updateUserPwd,updateUserPwd2} from "@/api/user";
import axios from 'axios'
import {$Message} from '@/../static/iview/base/index'
import Bus from "@/utils/bus";
import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名，指向src目录

export default {
  name: "index",
  data() {
    return {
      // 表单校验
      regs: {
        oldPasswordReg: /^(([\u4e00-\u9fa5])|[a-zA-Z0-9-_]){4,20}$/,
        pwdReg: /^.{6,20}$/,
        phone: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        numReg: /\d/,
        strReg: /[a-zA-Z]/,
        tsReg: /[^\u4e00-\u9fa5a-zA-Z0-9]/,
        reg1: /^[0-9]{5,}$/,
        reg2: /^[a-z]{5,}$/,
        reg3: /^[a-z0-9]{6,16}$/,
        reg4: /^[a-z0-9_]{6,16}$/,
        reg5: /\s/g,
        reg6: /^[a-z_]{6,16}$/,
        reg7: /^[0-9_]{6,16}$/
      },
      defClass: {
        1: false,
        4: false,
        5: false,
      },
      errorClass: {
        1: false,
        4: false,
        5: false
      },
      qrClass: {
        1: false,
        2: false,
        3: false,
        4: false
      },
      showErrorCLass: {
        1: false,
        4: false,
        5: false
      },
      msgValue: {
        msg1: '您当前账号的旧密码',
        msg4: '建议使用字母、数字和符号两种及以上的组合，6-20个字符',
        msg5: '请再次输入密码',
      },
      successImg: {
        show1: false,
        show4: false,
        show5: false
      },
      showClearBtn:{
        1:false,
        4:false,
        5:false
      },
      colorFont:{
        1:'color: #afafaf;',
        4:'color: #afafaf;',
        5:'color: #afafaf;'
      },
      placeholder:{
        1:'请输入旧密码',
        4:'请输入新密码',
        5:'请输入确认密码'
      },
      user: {
        oldPassword: '',
        newPassword: ''
      },
      password2: '',
      loading: false
    }
  },
  created(){},
  methods: {
    //确认
    submit() {
      this.colorFont={
        1:'color: #afafaf;',
        4:'color: #afafaf;',
        5:'color: #afafaf;'
      }
      this.defClass = {
        1: false,
        4: false,
        5: false,
      }
      this.showErrorCLass = {
        1: false,
        4: false,
        5: false,
      }
      if (!this.successImg.show1 || !this.successImg.show4 || !this.successImg.show5) {
        if (this.user.oldPassword == '') {
          this.errorClass['1'] = this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '旧密码不能为空'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
        }

        if (this.user.newPassword == '') {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '新密码不能为空'
        } else if (this.user.newPassword.length < 6 || this.user.newPassword.length > 20) {
          this.showErrorCLass['4'] = true
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '新密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(this.user.newPassword)) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
        }
        if (this.password2 != this.user.newPassword) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else if(this.password2==''){
          // this.colorFont['5']='color: #ff9595;'
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '确认密码不能为空'
        }else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
        }
        return
      }
      this.loading=true


      updateUserPwd2(this.user.oldPassword, this.user.newPassword).then(res => {
        if (res.code === 200){
          this.setToast({ title: '修改成功' });
          this.user={
            oldPassword: '',
            newPassword: '',
          }
          this.password2=''
        }else {
          this.setToast({ title: res.msg });
        }
      }).catch(err => {
        console.log(err);
        this.setModal({
          content: "不好！系统出现异常，快去汇报给开发小哥！"
        });
      }).then(() => {
        this.loading=false
        // Bus.$emit('跳转刷新','register');
      });
    },
    //返回上一步
    navigateBack(){
      this.user={
        oldPassword: '',
        newPassword: ''
      }
      this.password2=''
      wx.navigateBack({ delta: 1 });
    },
    // 输入框输入
    inputInput(e,val) {
      if (e == '1') {
        this.defClass['1'] = false
        this.successImg.show1 = false
        this.showErrorCLass['1'] = false
        this.showClearBtn['1']=true
        if (val == '') {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '旧密码不能为空'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
          this.successImg.show1 = true
        }
      } else if (e == '4') {
        this.defClass['4'] = false
        this.successImg.show4 = false
        this.showClearBtn['4']=true
        this.showErrorCLass['4'] = false
        if (val == '') {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '新密码不能为空'
        } else if (val.length < 6 || val.length > 20) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '新密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(val)) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else if (this.regs.reg1.test(val) || this.regs.reg2.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['2'] = true
          this.msgValue.msg4 = '有被盗风险,建议使用字母、数字和符号两种及以上组合'
        } else if (this.regs.reg6.test(val) || this.regs.reg3.test(val) || this.regs.reg7.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['3'] = true
          this.msgValue.msg4 = '安全强度适中，可以使用三种以上的组合来提高安全强度'
        } else if (this.regs.reg4.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.msgValue.msg4 = '你的密码很安全'
        } else {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.msgValue.msg4 = '你的密码很安全'
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.successImg.show4 = true
        }
      } else if (e == '5') {
        this.successImg.show5 = false
        this.defClass['5'] = false
        this.showErrorCLass['5'] = false
        this.showClearBtn['5']=true
        if (val != this.user.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
          this.successImg.show5 = true
        }
      }
    },

    // 输入框聚焦
    inputFocus(e,val) {
      if (e == '1') {
        this.successImg.show1 = false
        this.colorFont['1']='color: #afafaf;'
        this.showClearBtn['1']=true
        this.defClass['1'] = true
        this.errorClass['1'] = false
        this.msgValue.msg1 = '您当前账号的旧密码'
      } else if (e == '4') {
        this.successImg.show4 = false
        this.defClass['4'] = true
        this.errorClass['4'] = false
        this.qrClass['2'] = false
        this.qrClass['3'] = false
        this.qrClass['4'] = false
        this.msgValue.msg4 = '建议使用字母、数字和符号两种及以上的组合，6-20个字符'
        this.colorFont['4']='color: #afafaf;'
        this.showClearBtn['4']=true
      } else if (e == '5') {
        this.successImg.show5 = false
        this.defClass['5'] = true
        this.errorClass['5'] = false
        this.msgValue.msg5 = '请再次输入密码'
        this.colorFont['5']='color: #afafaf;'
        this.showClearBtn['5']=true
      } else {
        this.defClass = {
          1: false,
          4: false,
          5: false
        }
      }
    },

    // 输入框焦点消失
    inputBlur(e,val) {

      if (e == '1') {
        this.showClearBtn["1"]=false
        this.defClass['1'] = false
        if (val == '') {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '旧密码不能为空'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
          this.successImg.show1 = true
        }
      } else if (e == '4') {
        this.defClass['4'] = false
        this.showClearBtn["4"]=false
        if (val == '') {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '新密码不能为空'
        } else if (val.length < 6 || val.length > 20) {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '新密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(val)) {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else if (this.regs.reg1.test(val) || this.regs.reg2.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['2'] = true
          this.msgValue.msg4 = '有被盗风险,建议使用字母、数字和符号两种及以上组合'
        } else if (this.regs.reg6.test(val) || this.regs.reg3.test(val) || this.regs.reg7.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['3'] = true
          this.msgValue.msg4 = '安全强度适中，可以使用三种以上的组合来提高安全强度'
        } else if (this.regs.reg4.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.msgValue.msg4 = '你的密码很安全'
        } else {
          this.showErrorCLass['4'] = false
          this.msgValue.msg4 = '你的密码很安全'
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.successImg.show4 = true
        }
      } else if (e == '5') {
        this.showClearBtn["5"]=false
        this.defClass['5'] = false
        if (val != this.user.newPassword) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
          this.successImg.show5 = true
        }
      }  else {
      }
    },

    // 清空输入框
    inputClear(e) {
      if (e =='1') {
        this.user.oldPassword=""
        this.showClearBtn["1"]=false
        this.successImg.show1 = false
      } else if (e =='4') {
        this.user.newPassword = ''
        this.showClearBtn["4"]=false
        this.successImg.show4 = false
      }else if (e =='5') {
        this.password2 = ''
        this.showClearBtn["5"]=false
        this.successImg.show5 = false
      }
    },
  }
}
</script>

<style scoped>

.zcicon{
  color: #afafaf;
  font-size: 26rpx;
  margin-left: 20rpx;
  margin-top: -30rpx;
  margin-bottom: 20rpx;
}
.zc{
  padding-top: 30rpx;
  font-size: 28rpx;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-header {
  position: fixed;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 35%;
  background-image: url("");
}

.bg-footer {
  position: fixed;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 22%;
  align-items: flex-end;
  background-image: url("");
}

.form {
  width: 75%;
  margin: 0 auto;
}

.input-view {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin-bottom: 40rpx;
  background: #efeff4;
  animation-delay: 0.1s;
}

.input-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10rpx 0;
  background: #fff;
  border-bottom: 1rpx solid #ececec;
}

.input-icon {
  z-index: 999;
  font-size: 45rpx;
  margin: 0 4px;
}

.input-item input {
  flex: 1;
  font-size: 30rpx;
}

.tip {
  font-size: 28rpx;
  color: #afafaf;
  margin-left: 10rpx;
  animation-delay: 0.2s;
}

.protocol-text {
  color: #ffbd4a;
}

.submit-btn-wrap {
  animation-delay: 0.3s;
}

.submit-btn {
  margin: 30px 0 0 0;
  font-size: 32rpx;
  border-radius: 40rpx;
}

.phcolor{
  color: #afafaf;
}
.input-placeholder {
  color: #afafaf;
}
input::-webkit-input-placeholder{
  color: #ff9595;
}

.error-placeholder {
  color: #ff9595;
}

.hidden {
  visibility: hidden;
}

.back-nav {
  text-align: center;
  padding: 30rpx;
}

.back-nav text {
  font-size: 50rpx;
}

</style>
<style scoped>
.loader-part {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  /*top: 75%;*/
  bottom: 6%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ffbd4a;
  letter-spacing: 0.2em;
}
.loader-part::before,
.loader-part::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ffbd4a;
  position: absolute;
  animation: load 0.7s infinite alternate ease-in-out;
}
.loader-part::before {
  top: 0;
}
.loader-part::after {
  bottom: 0;
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }
  50% {
    height: 8px;
    width: 40px;
  }
  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}

</style>
